Limitless - Wizards
Overview
jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard. Supports multiple configuration options such as transitions, clickable titles, controlled text labels, multiple callbacks etc. To change the settings globally, change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.
Usage
Include the following lines of code in the <head> section of your HTML:
<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/stepy.min.js"></script>
Create a form with multiple fieldsets:
<!-- Create form -->
<form class="stepy-basic" action="#">
<fieldset title="Step 1">
<legend class="text-semibold">Step 1</legend>
...
</fieldset>
<fieldset title="Step 2">
<legend class="text-semibold">Step 2</legend>
...
</fieldset>
</form>
Finally call the plugin via JavaScript:
// Basic initialization
$(".stepy-basic").stepy({
// options
});
Plugin options
| Name | Default | Description |
|---|---|---|
back |
undefined | Callback before the backward action |
backLabel |
'< Back' | Change the back button label |
block |
false | Block the next step if the current is invalid |
description |
false | Choose if the descriptions of the titles will be showed |
duration |
0 | Duration of the transition between steps in ms |
enter |
true | Enables the enter key to change to the next step |
errorImage |
false | If an error occurs, a image is showed in the title of the corresponding step |
finish |
undefined | Callback before the finish action |
finishButton |
true | Include the button with class called '.finish' into the last step |
ignore |
'' | Choose the fields to be ignored on validation |
legend |
false | Choose if the legends of the steps will be showed |
next |
undefined | Callback before the forward action |
nextLabel |
'Next &rt;' | Change the next button label |
select |
undefined | Callback executed when the step is shown |
titleClick |
true | Active the back and next action in the titles |
titleTarget |
undefined | Choose the place where titles will be placed |
transition |
'hide' | Use transition between steps ('hide', 'fade' or 'slide') |
validate |
false | Active the jQuery Validation for each step |
Plugin methods
| Method | Description |
|---|---|
.stepy('step', 2); |
Changes the form to the second step |
.stepy('destroy'); |
Destroy the Stepy's bind and gives you the raw element |
Plugin info
| Property | Description |
|---|---|
| File name | stepy.min.js |
| Location | assets/js/plugins/forms/wizards/ |
| Updates | 0 |
| Links | Github project page |
Overview
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission.
Usage
Include the following lines of code in the <head> section of your HTML:
<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/steps.min.js"></script>
Create a form with multiple fieldsets:
<!-- Create form -->
<form class="steps-basic" action="#">
<h6>Step 1 header</h6>
<fieldset>
<legend class="text-semibold">Step 1</legend>
...
</fieldset>
<fieldset>
<legend class="text-semibold">Step 2</legend>
...
</fieldset>
</form>
Finally call the plugin via JavaScript:
// Basic initialization
$(".steps-basic").steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="number">#index#</span> #title#',
labels: {
finish: 'Submit'
},
onFinished: function (event, currentIndex) {
alert("Form submitted.");
}
});
Plugin options
| Option | Default | Description |
|---|---|---|
| Appearance | ||
headerTag |
h1 | The header tag is used to find the step button text within the declared wizard area. |
bodyTag |
div | The body tag is used to find the step content within the declared wizard area. |
contentContainerTag |
div | The content container tag which will be used to wrap all step contents. |
actionContainerTag |
div | The action container tag which will be used to wrap the pagination navigation. |
stepsContainerTag |
div | The steps container tag which will be used to wrap the steps navigation. |
cssClass |
wizard | The css class which will be added to the outer component wrapper. |
stepsOrientation |
horizontal or 0 |
Determines whether the steps are vertically or horizontally oriented. |
| Behaviour | ||
titleTemplate |
<span class="number">#index#.</span> #title# | The title template which will be used to create a step button |
loadingTemplate |
<span class="spinner"></span> #text# | The loading template which will be used to create the loading animation |
| Templates | ||
autoFocus |
false | Sets the focus to the first wizard instance in order to enable the key navigation from the begining if true |
enableAllSteps |
false | Enables all steps from the begining if true (all steps are clickable). |
enableKeyNavigation |
true | Enables keyboard navigation if true (arrow left and arrow right) |
enablePagination |
true | Enables pagination (next, previous and finish button) if true |
suppressPaginationOnFocus |
true | Suppresses pagination if a form field is focused |
enableContentCache |
true | Enables cache for async loaded or iframe embedded content |
enableCancelButton |
false | Shows the cancel button if enabled |
enableFinishButton |
true | Shows the finish button if enabled |
showFinishButtonAlways |
false | Shows the finish button always (on each step; right beside the next button) if true. Otherwise the next button will be replaced by the finish button if the last step becomes active |
forceMoveForward |
false | Prevents jumping to a previous step |
saveState |
false | Saves the current state (step position) to a cookie. By coming next time the last active step becomes activated |
startIndex |
0 | The position to start on (zero-based) |
| Transition Effects | ||
transitionEffect |
none or 0 | The animation effect which will be used for step transitions |
transitionEffectSpeed |
200 | Animation speed for step transitions (in milliseconds) |
| Labels | ||
cancel |
'Cancel' | Label for the cancel button |
current |
'Current step:' | This label is important for accessability reasons. Indicates which step is activated |
pagination |
'Pagination' | This label is important for accessability reasons and describes the kind of navigation |
finish |
'Finish' | Label for the finish button |
next |
'Next' | Label for the next button |
previous |
'Previous' | Label for the previous button |
loading |
'Loading ...' | Label for the loading animation |
Plugin events
| Event | Default | Description |
|---|---|---|
onStepChanging |
function (event, currentIndex, newIndex) { return true; } | Fires before the step changes and can be used to prevent step changing by returning false. Very useful for form validation |
onStepChanged |
function (event, currentIndex, priorIndex) { } | Fires after the step has change |
onCanceled |
function (event) { } | Fires after cancelation |
onFinishing |
function (event, currentIndex) { return true; } | Fires before finishing and can be used to prevent completion by returning false. Very useful for form validation |
onFinished |
function (event, currentIndex) { } | Fires after completion |
onInit |
function (event, currentIndex) { } | Fires when the wizard is initialized |
onContentLoaded |
function (event, currentIndex) { } | Fires after async content is loaded |
Plugin info
| Property | Description |
|---|---|
| File name | steps.min.js |
| Location | assets/js/plugins/forms/wizards/ |
| Updates | 0 |
| Links | Github project page |
Overview
jQuery plugin based on top of jQuery UI which turns a form into a multistep wizard. Integrates with the jQuery form plugin for AJAX submission of the form, the validation plugin for client side validation and the BBQ plugin for enabling the browsers back and forward buttons.
Usage
Include the following lines of code in the <head> section of your HTML:
<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form_wizard.min.js"></script>
<!-- Load extension -->
<script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form.min.js"></script>
Create a form with multiple fieldsets:
<!-- Create form -->
<form class="form-wizard" action="#">
<fieldset class="step" id="step1">
<h6 class="form-wizard-title text-semibold">
<span class="form-wizard-count">1</span>
Step 1 title
<small class="display-block">Subtitle</small>
</h6>
...
</fieldset>
<fieldset>
<h6 class="form-wizard-title text-semibold">
<span class="form-wizard-count">2</span>
Step 2 title
<small class="display-block">Subtitle</small>
</h6>
...
</fieldset>
</form>
Finally call the plugin via JavaScript:
// Basic initialization
$(".form-wizard").formwizard({
disableUIStyles: true,
disableInputFields: false,
inDuration: 150,
outDuration: 150
});
Plugin options
| Option | Default | Description |
|---|---|---|
historyEnabled |
false | true enables the BBQ plugin. Enables navigation of the wizard using the browser's back and forward buttons |
validationEnabled |
false | true enables the validation plugin |
validationOptions |
undefined | Holds options for the validation plugin. Requires validationEnabled |
formPluginEnabled |
false | true enables the form plugin. Makes sure that the plugin is posted via AJAX. Set to false if you want to post the form without using AJAX |
formOptions |
{ reset: true, success: function(data) { alert("success"); } | Holds options for the form plugin. See form plugin documentation for specific options |
linkClass |
".link" | Selector which specifies the CSS-class of inputs used as links in the wizard |
submitStepClass |
"submit_step" | Specifies the CSS-class of the steps where the form should be submitted |
back |
":reset" | Specifies the elements used as back buttons |
next |
":submit" | Specifies the elements used as next buttons |
textSubmit |
"Submit" | The text of the next button on submit steps |
textNext |
"Next" | The text of the next button on non-submit steps |
textback |
"Back" | The text of the back button |
remoteAjax |
undefined | Object holding options for AJAX calls done between steps |
inAnimation |
{opacity: 'show'} | Specifies the animation done during the in-transition between steps |
outAnimation |
{opacity: 'hide'} | Specifies the animation done during the out-transition between steps |
inDuration |
400 | Specifies the duration of the in-animation between steps |
outDuration |
400 | Specifies the duration of the out-animation between steps |
easing |
"swing" | Specifies the easing used during the transition animations between steps |
focusFirstInput |
false | Specifies whether the first input field on each step should be focused |
disableInputFields |
false | Specifies whether the input fields in the form should be disabled during the initialization of the plugin. The disabling of inputs may be needed to be done in HTML if the number of input fields are very large, if this is needed - set this flag to false |
disableUIStyles |
false | Specifies whether the wizard should use jquery UI styles or not |
Plugin events
Example usage:
// Event example
$(function() {
// bind a callback to the before_step_shown event
$("#demoForm").bind("before_step_shown", function(event, data) {
alert(data.isBackNavigation);
});
});
Available events:
| Event | Returns | Description |
|---|---|---|
after_remote_ajax |
currentStep: String (id of the current step)
|
This event is triggered after a remote ajax call has been done |
before_remote_ajax |
currentStep: String (id of the current step)
|
This event is triggered before a remote ajax call is done |
before_step_shown |
The data returned in the data variable is as follows (see the
|
This event is triggered just before a step is shown. It is triggered for both backwards and forwards navigation |
step_shown |
The data returned in the data variable is as follows (see the
|
This event is triggered when a step is shown. It's triggered for both back and forward navigation |
Plugin methods
Example usage:
// Method example
$("#demoForm").formwizard("update_steps");
Available methods:
| Method | Description |
|---|---|
before_step_shown |
This method returns the state of the wizard |
show |
This method takes care of showing a specified step in the wizard |
reset |
This method takes care of resetting the wizard |
destroy |
This method takes care of removing the wizard functionality from the form |
back |
This method triggers the wizard to move back |
next |
This method triggers the wizard to move to the next step |
update_steps |
This method triggers the wizard to check the form for available steps, and cache them |
Plugin info
| Property | Description |
|---|---|
| File name | form_wizard.min.js, form.min.js |
| Location | assets/js/plugins/forms/wizards/form/ |
| Updates | 0 |
| Links | Github project page |